<template>
    <div class="father">
        <h1>Flex布局</h1>
    </div>
    <div class="fatherFlex">

        <div v-for="i in num">
            <span>
                {{ i }}
            </span>
            <span>
                ****
            </span>
        </div>

    </div>
</template>

<script setup lang="ts" name="Father">
import { ref, reactive } from 'vue'

let num = ref(3)

</script>

<style  scoped>
.fatherFlex {
    height: 500px;
    display: flex;


    /* 1. row（默认值）：主轴为水平方向，起点在左端。
    2. row-reverse：主轴为水平方向，起点在右端。
    3. column：主轴为垂直方向，起点在上沿。
    4. column-reverse：主轴为垂直方向，起点在下沿。 */

    flex-direction: row;
    /* flex-wrap: wrap; */


    /* justify-content: flex-start | flex-end | center | space-between | space-around;    定义了项目在主轴上的对齐方式*/
    /* 1. flex-start（默认值）：左对齐
    2. flex-end：右对齐
    3. center： 居中
    4. space-between：两端对齐，项目之间的间隔都相等。
    5. space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
    6. space-evenly: 平均分布 */

    justify-content: space-around;


    /* align-items: flex-start | flex-end | center | baseline | stretch;

    1. flex-start：交叉轴的起点对齐。
    2. flex-end：交叉轴的终点对齐。
    3. center：交叉轴的中点对齐。
    4. baseline: 项目的第一行文字的基线对齐。
    5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 */


    align-items: center;




}

.fatherFlex>div {
    width: 200px;
    height: 200px;
    text-align: center;
    background-color: aqua;
    border: 1px solid yellow;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* flex-grow:1 */
}

.father {
    padding: 20px;
    border-radius: 10px;
    background-color: beige;
}
</style>